<script setup>

import Seach from './components/Search.vue'
import {ref,onMounted,watch,reactive} from "vue"
//import axios from "axios"
import {ElMessage,ElLoading} from "element-plus"


const value1 = ref(true)
let username = '李四'
let age=ref(20)
let obj=ref([{'name':'张三','age':20}])
let stu = reactive({name: '废物',age: 20,hobby: '篮球'})

const changename = (name) => {
  username = name
  console.log(username)
}
const changeage = () => {
    age.value = 18
    obj.value[0].age = 25
   
}
const changestu = () =>{
    stu.name = 'loudd'
    stu.age = 30
    console.log(stu.name)
}

let id=ref('hello')
let styleobj = ref({
    'background':'',
    'color':'red'
})
const changeyellow=()=>{
    styleobj.value.background='blue'
}


let stulist=ref([
    {'name':'小小','age':'18'},
    {'name':'小er1','age':'20'}
])


let flag=ref(true)
const show=()=>{
    flag.value=!flag.value
}

let aaa=ref({
    names:""
})
const setname=()=>{
    aaa.value.names=''
}
</script>

<template>
 
<div>
    {{ username }},你好
    <button v-on:click="changename('王五')">改名</button>
    <hr>
    <p>{{ age }}<button @click="changeage">改年龄</button></p>
    {{ obj }}
    <hr>
    <p>{{ stu }}<button @click="changestu">11</button></p>
    
</div>
<hr>
<div>
    <p id="id" class="two" v-bind:style="styleobj">hello</p>
    <button @click="changeyellow">点击修改颜色</button>
</div>

<div>
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr v-for="(it,k) in stulist" :key="k">
            <td>{{ it.name }}</td>
            <td>{{ it.age }}</td>
        </tr>
    </table>
</div>

<hr>
<div>
    <p class="one" v-show="flag">帆帆父亲为展示</p>
    <button @click="show">{{ flag?'隐藏':'显示' }}</button>
</div>

<div>
    <p>用户名:<input type="text" v-model="aaa.names"></p>
    {{ aaa }}
    <button @click="setname">重置</button>
    <hr>
    <Seach></Seach>
</div>

<div >
    <el-button type="danger">Danger</el-button>
  
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="danger">Danger</el-button>
    
    <el-switch v-model="value1" />
  
    </div>
</template>

<style scoped>

</style>
